<template>
	<view class="applySale">
		<view class="part">
			<!-- <view class="identify dFlex jBetween_aCenter">
				<view class="desc">因您是博物甄选白银会员，享受急速退款服务</view>
			</view> -->
			<view class="line dFlex jBetween_aCenter" v-if="type == '1'"> 
				<view class="lineTite">申请数量</view>
				<view class="lineContent dFlex jBetween_aCenter">
					<view class="lineVal">
						<u-number-box v-model="refund_num" :disabled-input='true' @chang='changeNum' :min='1' :max='shopInfo.goods_num'></u-number-box>
					</view>
					<view class="rightIcon imgPublic">
						<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter" v-if="type == '1'">
				<view class="lineTite">申请类型</view>
				<view class="lineContent dFlex jBetween_aCenter">
					<view class="lineVal">
						<picker mode="selector" :range="kind" :range-key="'name'" @change="selType">
							<input type="text" disabled="" :value="selKind.id?selKind.name:''" placeholder="点击选择申请类型">
						</picker>
					</view>
					<view class="rightIcon imgPublic">
						<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter" v-if="type == '2'">
				<view class="lineTite">申请类型</view>
				<view class="lineContent dFlex jBetween_aCenter">
					<view class="lineVal">
						<picker mode="selector" :range="kind2" :range-key="'name'" @change="selType">
							<input type="text" disabled="" :value="selKind.id?selKind.name:''" placeholder="点击选择申请类型">
						</picker>
					</view>
					<view class="rightIcon imgPublic">
						<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter" v-if="type == '1'">
				<view class="lineTite">申请原因</view>
				<view class="lineContent dFlex jBetween_aCenter">
					<view class="lineVal">
						<picker mode="selector" :range="reason" :range-key="'name'" @change="selreason">
							<input type="text" disabled="" :value="refund_reason.id?refund_reason.name:''" placeholder="点击选择申请原因">
						</picker>
					</view>
					<view class="rightIcon imgPublic">
						<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter" v-if="type == '2' && refund_type == '1'">
				<view class="lineTite">申请原因</view>
				<view class="lineContent dFlex jBetween_aCenter">
					<view class="lineVal">
						<picker mode="selector" :range="reason2" :range-key="'name'" @change="selreason">
							<input type="text" disabled="" :value="refund_reason.id?refund_reason.name:''" placeholder="点击选择申请原因">
						</picker>
					</view>
					<view class="rightIcon imgPublic">
						<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter" v-if="type == '2' && refund_type == '2'">
				<view class="lineTite">申请原因</view>
				<view class="lineContent dFlex jBetween_aCenter">
					<view class="lineVal">
						<picker mode="selector" :range="reason3" :range-key="'name'" @change="selreason">
							<input type="text" disabled="" :value="refund_reason.id?refund_reason.name:''" placeholder="点击选择申请原因">
						</picker>
					</view>
					<view class="rightIcon imgPublic">
						<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="line">
				<view class="lineTite">申请金额</view>
				<view class="lineContent">
					<view class="ipt dFlex jStart_aCenter">
						<text>￥</text>
						<input type="number" :value='parseFloat(shopInfo.total_money / shopInfo.goods_num * refund_num).toFixed(2)' disabled placeholder-style="font-size:16px;font-weight:400;" placeholder="请输入申请金额">
					</view>
				</view>
			</view>
			<!-- 缺货、货物未送达状态 -->
			<view class="line dFlex jStart_aCenter" v-if="refund_type == 3">
				<view class="choose dFlex jStart_aCenter" @tap='is_reason = 1'>
					<view class="statusIcon imgPublic">
						<image v-if='is_reason != 1' src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/unsel.png" mode="widthFix"></image>
						<image v-if='is_reason == 1' src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/sel.png" mode="widthFix"></image>
					</view>
					<text>缺少此商品</text>
				</view>
				<view class="choose dFlex jStart_aCenter" @tap='is_reason = 2'>
					<view class="statusIcon imgPublic">
						<image v-if='is_reason != 2' src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/unsel.png" mode="widthFix"></image>
						<image v-if='is_reason == 2' src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/sel.png" mode="widthFix"></image>
					</view>
					<text>联系不上团长</text>
				</view>
			</view>
		</view>
		<view class="part">
			<view class="line">
				<view class="lineTite dFlex jBetween_aCenter">
					<text>申请补充说明（必填）</text>
				</view>
				<view class="lineContent">
					<view class="reason">
						<textarea v-model="refund_reason_desc" placeholder="补充说明,有利于我们更好的处理您的售后问题" maxlength="200" cols="30" rows="10"></textarea>
					</view>
					<view class="upImg dFlex jStart_aStart">
						<view class="upTool imgPublic" @tap='chooseImg'>
							<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/upTool.png" mode="widthFix"></image>
						</view>
						<view class="imgList">
							<view class="imgOne" v-for="(item,index) in imgArr" :key='index'>
								<image :src="item" mode="widthFix"></image>
								<view class="delIcon imgPublic" @tap.stop='delImg(index)'>
									<image src="https://kmbs-ytk.oss-cn-qingdao.aliyuncs.com/cMini/del.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="part">
			<view class="line dFlex jBetween_aCenter">
				<view class="lineTite">联系电话</view>
				<view class="lineContent dFlex jBetween_aCenter">
					<view class="lineVal">
						<input type="number" v-model="mobile" placeholder="请输入联系电话">
					</view>
				</view>
			</view>
		</view>
		<view class="seat"></view>
		<view class="btn" @tap='subInfo'>提交申请</view>
	</view>
</template> 

<script>
	import {
		orderList,submitRefund,info
	} from '@/tools/http.js';
	import {domain} from '@/tools/config.js';
	import tools from '@/tools/tools.js';
	export default {
		data() {
			return {
				kind:[
					{id:2,name:'我要退货退款（已提货）'},
					{id:1,name:'我要退款（货在服务点）'},
					{id:3,name:'我要退款（缺货/货未送达）'},
				],
				kind2:[
					{id:2,name:'我要退货退款（已取货）'},
					{id:1,name:'我要退款（无需退货）'},
				],
				selKind:{},
				reason:[
					{id:1,name:'商品质量问题'},
					{id:2,name:'实物与商品描述不符'},
					{id:3,name:'发错货'},
					{id:4,name:'收到商品破损'},
					{id:5,name:'其他原因'},
				],
				reason2:[
					{id:1,name:'不想要了'},
					{id:2,name:'发货慢'},
					{id:3,name:'收货地址信息填写有误'},
					{id:4,name:'其他原因'},
				],
				reason3:[
					{id:1,name:'不喜欢、效果不好'},
					{id:2,name:'材质、面料与商品不符'},
					{id:3,name:'大小尺寸与商品描述不符'},
					{id:4,name:'质量问题'},
					{id:5,name:'收到商品少件(含少配件)'},
					{id:6,name:'收到商品破损'},
					{id:7,name:'其他原因'},
				],
				refund_reason:{},
				imgArr:[],
				refund_reason_desc:'',
				// 缺货 货物未送达
				is_reason:'',// 1缺货  2联系不上团长
				
				order_id:'',//原订单id
				order_detail_id:'',//原订单详情id
				refund_type:'',//退款类型 
				type:'',//退单类型
				refund_num:1,//退货数量
				mobile:'',//联系电话
				
				shopInfo:{},
			};
		},
		onLoad(e) {
			console.log(e);
			this.order_id = e.order_id;
			this.order_detail_id = e.order_detail_id;
			this.refund_type = e.refund_type;  
			this.type = e.type;
			this.initData();
			this.initMobile();
			// this.selKind = this.type == "1"?this.kind[this.tool.getIdx(this.kind,'id',e.refund_type)]:this.kind2[this.tool.getIdx(this.kind2,'id',e.refund_type)];
		},
		methods:{
			// 商品详情
			async initData(){
				let res = await orderList({
					ids:this.order_id
				});
				if(res){
					res[0].ordergoods.map((item,index)=>{
						if(item.id == this.order_detail_id){
							this.refund_num = item.goods_num;
							item.goods.main_img = domain+item.goods.main_img;
							this.shopInfo = item;
						}
					})
				}
			},
			async initMobile(){
				let res = await info({});
				console.log(res);
				if(res){
					this.mobile = res.mobile;
				}
			},
			// 提交申请
			async subInfo(){
				if(!this.refund_reason.id){
					uni.showToast({
						title:'请选择申请原因',
						icon:"none"
					})
					return;
				}
				if(!this.refund_reason_desc){
					uni.showToast({
						title:'申请说明不能为空',
						icon:"none"
					})
					return;
				}
				let res = await submitRefund({
					order_id:this.order_id,
					order_detail_id:this.order_detail_id,
					refund_num:this.refund_num,
					refund_type:this.refund_type,
					refund_reason_desc:this.refund_reason_desc,
					refund_reason:this.refund_reason.name,
					refund_reason_imgs:this.imgArr.join(','),
					mobile:this.mobile,
					type:this.type,
					is_reason:this.is_reason,
				});
				if(res){
					uni.showToast({
						title:'申请已提交',
						icon:"success"
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1650)
				}
			},
			// 修改申请数量
			changeNum(e){
				// console.log(e);
			},
			// 选择申请类型
			selType(e){
				this.selKind = this.type == 1?this.kind[e.detail.value]:this.kind2[e.detail.value];
			},
			// 选择申请原因
			selreason(e){
				if(this.type == 1){
					this.refund_reason = this.reason[e.detail.value];
				}else{
					if(this.refund_type == '1'){
						this.refund_reason = this.reason2[e.detail.value];
					}else if(this.refund_type == '2'){
						this.refund_reason = this.reason3[e.detail.value];
					}
				}
			},
			// 选择图片
			chooseImg(){
				let count = 9 - this.imgArr.length>0?9 - this.imgArr.length:0;
				uni.chooseMedia({
					count:count,
					mediaType:['image'],
					sourceType:['album', 'camera'],
					success:(file)=>{
						if(file.tempFiles.length){
							file.tempFiles.map((item,index)=>{
								tools.upImg(item.tempFilePath).then(res=>{
									if(res.fullurl){
										this.imgArr.push(res.fullurl);
									}
								}).catch(err=>{
									console.log(err);
								})
							})
						}
					},
					fail:(err)=>{
						console.log(err);
						uni.showToast({
							title:'图片选择失败',
							icon:"none"
						})
					}
				})
			},
			// 删除图片
			delImg(idx){
				this.imgArr.splice(idx,1);
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F4F4F4;
	}
	.btn{
		width: 74.4%;
		position:fixed;
		left: 12.8%;
		bottom:3%;
		text-align: center;
		color: white;
		border-radius: 50px;
		padding: 24rpx 0;
		background: #3E8EF0;
	}
	.part{
		width: 100%;
		background: white;
		margin-bottom: 20rpx;
		.line{
			background: white;
			padding: 26rpx 30rpx;
			box-sizing: border-box;
			.choose{
				width: 40%;
				.statusIcon{
					width: 40rpx;
					height: 40rpx;
					margin-right: 12rpx;
				}
			}
			.lineTite{
				width: max-content;
				margin-right: 40rpx; 
				font-size: 15px;
				color: #666666;
			}
			.lineContent{
				flex: 1;
				.upImg{
					width: 100%; 
					.imgList{
						flex: 1;
						.imgOne{
							display: inline-block;
							width: 45%;
							position: relative;
							margin: 0 12px 12px 0;
							.delIcon{
								width: 40rpx;
								height: 40rpx;
								position: absolute;
								top: -20rpx;
								right:-20rpx;
							}
						}
					}
					.upTool{
						width:168rpx;
						height: 168rpx;
						margin-right: 12px;
					}
				}
				.reason{
					margin: 10px 0;
					color: #333333;
				}
				.ipt{
					margin-top: 4px;
					color: #333333;
					font-size: 27px;
					font-weight: bold;
				}
				.lineVal{
					flex: 1;
					margin-right: 12px;
				}
				.rightIcon{
					width: 30rpx;
				}
			}
		}
		.identify{
			width: 100%;
			background: #FEF5D6;   
			color: #FC9700;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
		}
	}
</style>
